<template>
  <div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "map-view",
  data () {
    return {
      map: ''
    }
  },
  mounted() {
    this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "156a23b600278ed69ccc950100d6aa2f", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        // 'AMap.HawkEye','AMap.MapType','AMap.Geolocation','AMap.AutoComplete','AMap.PlaceSearch'
        plugins: ['AMap.Scale','AMap.MapType', 'AMap.Marker'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          let _this = this
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 16, // 初始化地图级别
            center: [118.666258,31.906424], // 初始化地图中心点位置
          });
          // 异步加载
          // AMap.plugin("AMap.Geocoder",function(){//异步同时加载多个插件
          //   let geocoder = new AMap.Geocoder({
          //     city:''
          //   })
          // });
          // const marker = new AMap.Marker({
          //   position: new AMap.LngLat(118.666258,31.906424), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          //   title: 'DJ二期'
          // })
          // 同步加载
          // this.map.addControl(new AMap.ToolBar())
          this.map.addControl(new AMap.Scale())
          this.map.addControl(new AMap.MapType())
          this.map.addControl(new AMap.Marker({
            position: [118.666258,31.906424],
            title: 'DJ二期',
            label: 'DJ二期',
          }))
          // this.map.addControl(new AMap.MapType())
          // this.map.addControl(new AMap.Geocoder())
          // this.map.addControl(new AMap.AutoComplete())
          // this.map.addControl(new AMap.PlaceSearch())
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
<style scoped>
  #container {
    width: 100%;
    height: 340px;
    border-radius: 5px;
  }
</style>
